<template>
  <div class="common-layout">
    <el-container>

      <el-header style="background-color: #545c64; color: #fff; line-height: 80px; border-bottom: 1px solid #eaeaea;">
        <el-row>
          <el-col :span="8">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
              <el-radio-button :value="false">expand</el-radio-button>
              <el-radio-button :value="true">collapse</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="8">当前用户：{{ userInfo.userName }}({{ userInfo.roleName }})</el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="collapse" style="display: flex; background-color:#545c64 ;">
          <el-menu active-text-color="#ffd04b" background-color="#545c64"
                   class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" @open="handleOpen"
                   @close="handleClose" router="true">
            <el-sub-menu v-for="menu in treeData" :key="menu.menuId" :index="menu.menuId">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>{{ menu.menuName }}</span>
              </template>
              <el-menu-item v-for="child in menu.children" :key="child.menuId" :index="child.menuUrl">
                {{ child.menuName }}
              </el-menu-item>
            </el-sub-menu>
            <!-- <el-sub-menu v-for="menu in menuData.filter(m => m.parentId === 0)" :key="menu.id" :index="menu.id">
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menuData.filter(m => m.parentId === menu.id)" :key="child.id" :index="child.path">{{child.name}}</el-menu-item>
            </el-sub-menu> -->
            <!-- <el-sub-menu index="1">
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="/system/user">用户管理</el-menu-item>
                <el-menu-item index="/system/role">角色管理</el-menu-item>
                <el-menu-item index="/system/menu">菜单管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <el-icon><icon-menu /></el-icon>
                    <span>用户设置</span>
                </template>
                <el-menu-item index="2-1">个人信息</el-menu-item>
                <el-menu-item index="2-2">修改密码</el-menu-item>
            </el-sub-menu>-->
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import {ref, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
//获得数据

const menuData = ref([])

const treeData = ref([])

const userInfo  = ref('')

onMounted(() => {
  axios.get("/menu/list").then(response => {
    console.log(response.data.data)
    menuData.value = response.data.data
    treeData.value = arrayToTree(response.data.data, -1)
  }).catch(error => {
    console.error("菜单请求失败:", error)
  })
  // //显示用户信息
  // let token = sessionStorage.getItem('token')
  // if (token) {
  //   userInfo.value = JSON.parse(decodeBase64(token.split('.')[1]))
  //   console.log("用户信息:", userInfo)
  // } else {
  //   ElMessage.error('请先登录')
  // }
})

interface Menu {
  id: number;
  name: string;
  icon: string;
  path: string;
  parentId: number;
  children?: Menu[];
}


function arrayToTree( array, parentId = 0) {
  let result = [];
  for (let item of array) {
    if (item.parentId === parentId) {
      const children = arrayToTree(array, item.menuId);
      if (children.length) {
        item.children = children;
      }
      result.push(item);
    }
  }
  return result;
}


//开关菜单
const isCollapse = ref(false)

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}


function decodeBase64(base64Str: string): string {
  // 使用atob解码Base64字符串
  const binaryString = atob(base64Str);
  // 将二进制字符串转换为UTF-8编码的字符串
  const decodedString = decodeURIComponent(escape(binaryString));
  return decodedString;
}
</script>
<style scoped>
.common-layout {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
  width: 100%;
}

.el-main {
  padding: 10px;
  background-color: #f2eeee;
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
  background-color: #545c64;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>
